<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../css/icon.css">

    <link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- 导入 vis.js 库-->
    <script type="text/javascript" src="../vis/vis.min.js"></script>

    <!-- 导入 vis.js 的 CSS 样式 -->
    <link rel="stylesheet" type="text/css" href="../vis/vis.min.css">
    
    <meta name="related_mindmap" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" charset="UTF-8">

    <title>related_mindmap</title>
    <style>
      

        body {
            /* position: absolute; */
            background-color: #ffffff;
            /* left: 1%;
            width: 95%;
            display: flex;
            height: 97%; 设置高度为视窗高度 */
            
        }

        .mainContainer{
            position: absolute;
            background-color: #ffffff;
            left: 1%;
            width: 95%;
            display: flex;
            height: 97%; /* 设置高度为视窗高度 */
            
        }
    
        .leftColumn {
            margin-top: 6.5%;
            flex: 4; /* 占用 4/7 的空间 */
            border: 4px groove #a9bdbc; /* 边框宽度、样式和颜色 */
            border-radius: 15px; /* 圆角的弯曲度，可以是像素值或百分比 */
        }

        #rightColumn {
            display: flex;
            flex-direction: column; /* 垂直方向排列子元素 */
            flex: 3; /* 占用 3/7 的空间 */
        }


        #rightTopRow {
            display: flex;
            flex: 1; 
            margin-bottom: 10px;
            justify-content: flex-end;
        }

        #rightMidRow {
            flex: 5; 
            height: 220px; 
            margin-bottom: 10px;
            border: 2px solid rgb(42, 119, 36);
            margin-left: 5px;
         
        }

        #rightBottomRow {
            flex: 10; 
            
            border: 3px solid rgb(42, 119, 36);
            overflow: auto; /* 或 overflow: scroll; */
            border-radius: 10px;
            margin-left: 5px;
            padding: 20px; /* 内边距 */
        }

        .more_button{
            display: flex;
            margin-right: 10px;
            cursor: pointer;
            border: none;
            background-color: inherit;
        
            font-size: 28px;
         
        }

        /* 按钮悬浮时的样式 */
        .more_button:hover {
        background-color: #bfdf1e; /* 悬浮时的背景颜色 */
        }

        /* 按钮被点击时的样式 */
        .more_button:active {
            background-color: #dcfb10; /* 点击时的背景颜色，可以与默认颜色相同或不同 */
        }

        .close_icon_button{
        font-size: 22px;
        border-radius: 20px;

        position:display;
        border:1px solid #e83313;
        background: #e83313;
        color: #fff;
        z-index: 1000;
        right: 2%;
        }

        /* 按钮悬浮时的样式 */
        .close_icon_button:hover {
            border-radius: 20px;
            border: 1px solid #ff4b2b;
            background: #ff4b2b;
            color: #fff;
            font-size: 22px;
            font-weight: bold;
    
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: transform 80ms ease-in;
            cursor: pointer;
        }

                /* 设定表格容器的高度，使其可以上下滚动 */
        .table-container {
            width: 100%;
            top: 5%;
            height: 97%;
            overflow-y: auto;
        }
        
        .table-container a{
            text-decoration: none;
            color: black;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th{
            position: sticky;
            top: 0;
            border: 1px solid rgb(255, 255, 255);
            padding: 1px;
            text-align: center;
        }

        td {
            border: 1px solid #ddd;
            padding-left: 5px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
<div class="mainContainer">
    <div class="leftColumn" id="contentContainer">
        <!-- 左侧列的内容 -->
        
    </div>
    <div id="rightColumn">
        <div id="rightTopRow">
            <button id="more_button" class="more_button" ><i class="fa fa-ellipsis-h"></i></button>
            <button id="close_button" class="close_icon_button"><i class="fa fa-close"></i></button>
        </div>
        <div id="rightMidRow">
            <div class="table-container">
                <!-- 表格 -->
                <table id="myTable">
                    <!-- 表头 -->
                    <thead>
                        <tr>
                            <th>相关课程列表 点击可跳转！</th>
                            <!-- 添加更多表头 -->
                        </tr>
                    </thead>
                    <!-- 表格内容 -->
                    <tbody id="tableBody">
                        <!-- 动态生成的表格内容 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <div id="rightBottomRow">
            <!-- 右下方行的内容 -->
            <h3>分布式系统</h3>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;分布式系统是指由多台计算机组成的系统，这些计算机通过网络进行通信和协作，以完成共同的任务或提供服务。与集中式系统相对，分布式系统的关键特点在于它的组成部分分布在不同的地理位置，并通过通信网络进行连接。

                以下是分布式系统的一些关键概念和特点：
                
                多节点性质： 分布式系统包含多个节点，每个节点都是独立的计算机或服务器。这些节点可以是物理机器，也可以是虚拟机器。
                
                网络通信： 分布式系统的节点通过网络进行通信。节点之间的通信是实现协同工作和共享资源的关键。
                
                并发性： 分布式系统通常具有高度的并发性，即多个任务可以同时执行。这是通过将任务分配给不同的节点来实现的。
            </p>
        </div>
    </div>
</div>
</body>
<script src="../js/related_mindmap.js"></script>
</html>
